<template>
  <view class="comp-a-container">
    <text style="font-size:50rpx; ">子组件A</text>
    <view class="coma_box">
      <text>父组件传进来的值：</text>
      <text style="font-weight: bold;color: red;">{{displayValue}}</text>
    </view>
    <button type="primary" @click="sendData()">传值给CompB组件</button>
  </view>
</template>

<script>
export default {
  props: {
    intent: {
      type: String,
      default: 'Hello'
    }
  },
  data() {
    return {
      displayValue: 'Hello'
    }
  },
  watch: {
    intent: {
      immediate: true,
      handler(newVal) {
        this.displayValue = newVal || 'Hello';
      }
    }
  },
  mounted() {
    this.displayValue = this.intent || 'Hello';
  },
  methods: {
    updateData(value) {
      this.displayValue = value || 'Hello';
    },
    sendData() {
      const sendValue = this.displayValue || 'Hello';
      uni.$emit('sendToCompB', sendValue);
      uni.showToast({
        title: '数据已发送',
        icon: 'success'
      });
    }
  }
}
</script>

<style scoped>
.comp-a-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
  margin: 20rpx;
  background-color: #e6f7ff !important; /* 浅蓝色背景，使用!important确保优先级 */
  border-radius: 15rpx;
  border: 2rpx solid #91d5ff;
}

.coma_box {
  margin: 20rpx 0;
  padding: 20rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  min-height: 60rpx;
  display: flex;
  align-items: center;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
}
</style>